<template>
  <div id="wechat" :style="{ backgroundImage: 'url(' + this.bgimg + ')' }">
    <h3 style="text-align: center">暂时支持小米运动</h3>
    <van-form @submit="onSubmit" :show-error-message="false">
      <van-field
        style="
          background-color: transparent !important;
          font-size: 1rem !important;
        "
        v-model="username"
        name="账号"
        label="账号"
        placeholder="输入账号(数字)"
        autocomplete="off"
        maxlength="11"
        type="number"
      />
      <van-field
        style="
          background-color: transparent !important;
          font-size: 1rem !important;
        "
        v-model="password"
        type="password"
        name="密码"
        maxlength="18"
        label="密码"
        placeholder="输入密码"
        autocomplete="off"
      />
      <van-field
        style="
          background-color: transparent !important;
          font-size: 1rem !important;
        "
        v-model="StepCount"
        type="number"
        name="步数"
        label="步数"
        maxlength="5"
        placeholder="输入步数(1~99999)"
        autocomplete="off"
      />
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          :loading="isdisplay"
          native-type="submit"
          @click="btn"
          :disabled="isbtn"
          >{{ mes }}</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import axios from 'axios'
import { Toast } from 'vant'
import { Dialog } from 'vant'
export default {
  created() {
    // eslint-disable-next-line no-undef
    // console.log(process.env.VUE_APP_BASE_API)
  },
  data() {
    return {
      mes: '提交',
      isdisplay: false,
      username: '',
      password: '',
      StepCount: '',
      bgimg: require('@/assets/img/WeChat/login_background6.jpg')
    }
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values)
    },
    // yanzheng() {
    //   if (this.username && isnum.test(this.username)) {
    //     return alert('请输入数字')
    //   }
    // },
    //
    btn() {
      this.isdisplay = true
      let apiurl = null
      // eslint-disable-next-line no-undef
      if (process.env.VUE_APP_ENV === 'development') {
        apiurl = '/api/action'
      } else {
        // eslint-disable-next-line no-undef
        apiurl = process.env.VUE_APP_BASE_API + '/api/action'
      }
      axios
        .get(apiurl, {
          params: {
            phone: this.username,
            password: this.password,
            steps: this.StepCount,
            type: 2
          }
        })
        .then((response) => {
          // 处理成功情况
          if (response.data.code === 200) {
            this.isdisplay = false
            Toast.success({
              message: response.data.msg,
              duration: 2000
            })
          } else if (response.data.code === -3) {
            this.isdisplay = false
            Toast.success({
              message: '账号或密码错误',
              duration: 2000
            })
          } else if (response.data.status == 500) {
            this.isdisplay = false
            console.log(response.data.error)
          }
        })
        .catch((error) => {
          this.isdisplay = false
          // 处理错误情况
          Dialog.confirm({
            title: '提示',
            message: '生产环境暂不支持修改'
          })
            .then(() => {
              // on confirm
              this.$router.push('/shouye')
            })
            .catch(() => {
              // on cancel
            })
          return error
        })
    }
  },
  computed: {
    isbtn() {
      if (this.username != '' && this.password != '' && this.StepCount != '') {
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style lang="less" scoped>
#wechat {
  height: 100%;
  width: 100%;
  // background-color: aqua;
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: -200px;
  h3 {
    color: rgb(225, 225, 225, 0.6) !important;
    height: 200px;
  }
  /deep/input {
    color: #fff !important;
  }
  .van-field__label {
    color: #fff !important;
  }
  .van-field__control {
    color: #fff !important;
  }
  .van-cell__title {
    font-size: 1rem !important;
  }
  .van-cell__value {
    font-size: 0.9rem !important;
  }
}
/deep/.van-toast {
  background-color: rgba(0, 0, 0, 0.4) !important;
}
</style>
